<template>
  <div class="add-medium-container">
    <div class="add-btn">
      <div class="btn" @click="tapOpenDialog">添加资源 <img :src="add_user_btn" alt=""></div>
    </div>
    <!-- <el-collapse v-model="activeNames" :accordion="true">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="add-btn">
            <div class="btn" @click="tapOpenDialog">添加达人信息 <img :src="add_user_btn" alt=""></div>
          </div>
        </template>
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            style="font-size: 13px;"
            placeholder="请输入昵称关键词"
            @keyup.enter.native="getData(true)"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"/>
          </el-input>
          <div class="search-btn" @click="getData(true)">搜索</div>
        </div>
        <div v-loading="searchLoading" class="search-result">
          <template v-if="searchData.items">
            <div v-for="(item, index) in searchData.items" :key="index" class="result-item">
              <div class="result-tag">{{ item.platform }}</div>
              <div class="result-info">
                <div class="avatar">{{ item.accountName.substring(0, 2) }}</div>
                <div class="info">
                  <div class="name">{{ item.accountName }}</div>
                  <div class="num">id/链接：
                    <a
                      v-if="item.accountId.indexOf('http') >= 0"
                      :href="item.accountId"
                      target="_blank"
                      class="link-name">
                      点击跳转<img src="../../../assets/medium/link.png" alt="">
                    </a>
                    <span v-else>{{ item.accountId }}</span>
                    <div class="num">粉丝数：{{ item.fansNum | numFormat(true) }}</div>
                  </div>
                </div>
              </div>
              <div class="result-btn">
                <div v-if="!item.select" :class="{'select': item.select}" class="btn" @click="selectUser(item)">
                  <i v-if="operatorLoading" class="el-icon-loading"/>
                  选择
                </div>
                <div v-if="item.select" class="select btn" >已选择</div>
              </div>
            </div>
            <div v-if="searchData && searchData.items && searchData.items.length > 0 && searchData.total > perPage" style="text-align:center;">
              <el-pagination
                :current-page="searchData.page "
                :page-size="searchData.perPage"
                :total="searchData.total"
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
              />
            </div>

          </template>
          <div v-if="searchData.items && searchData.items.length === 0" style="text-align:center;margin-top:30px;">暂无数据</div>
        </div>
      </el-collapse-item>
    </el-collapse> -->
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="tapOpenDialog"
      class="small-common-dialog-size">
      <Title title="添加资源" font-size="16px" style="margin-bottom: 24px;" />
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          style="font-size: 13px;"
          placeholder="请输入昵称关键词"
          @keyup.enter.native="getData(true)"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"/>
          <div slot="suffix" class="search-btn" @click="getData(true)">查询</div>
        </el-input>
      </div>
      <div v-loading="searchLoading" class="search-result" style="min-height: 28px;">
        <template v-if="searchData.items">
          <div v-for="(item, index) in searchData.items" :key="index" class="result-item">
            <!-- <div class="result-tag-container"><div v-if="item.platform" class="result-tag">{{ item.platform }}</div></div> -->
            <div class="result-info">
              <div class="avatar">{{ item.accountName.substring(0, 2) }}</div>
              <div class="info">
                <div class="name-box">
                  <platform-icon :data="item.platform" margin-left="0px" />
                  <div class="name ellipsis">
                    <resource-info
                      :resource-name="item.accountName"
                      :account-name-organization="item.accountNameOrganization"
                      resource-id="none"
                      account-name-platform="none"
                      account-belong-name="none"
                    />
                  </div>
                </div>
                <div class="num">ID：
                  <a
                    v-if="item.accountId.indexOf('http') >= 0"
                    :href="item.accountId"
                    target="_blank"
                    class="link-name">
                    点击跳转
                    <i class="el-icon-link"/>
                    <!-- <img src="../../../assets/medium/link.png" alt=""> -->
                  </a>
                  <span v-else>{{ item.accountId }}</span>
                  <div v-if="item.fansNum" class="num">粉丝数：{{ item.fansNum | numFormat(true) }}</div>
                  <div v-else-if="item.fansNum === 0" class="num">粉丝数：0</div>
                  <div v-else class="num">粉丝数：--</div>
                </div>
              </div>
            </div>
            <div class="result-btn">
              <div v-if="!item.isSelect" :class="{'select': item.isSelect}" class="btn" @click="selectUser(item)">
                <i v-if="operatorLoading" class="el-icon-loading"/>
                选择
              </div>
              <div v-if="item.isSelect" class="select btn" >已选</div>
            </div>
          </div>
          <div v-if="searchData && searchData.items && searchData.items.length > 0 && searchData.total > perPage" style="text-align:center;">
            <el-pagination
              :current-page="searchData.page "
              :page-size="searchData.perPage"
              :total="searchData.total"
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
            />
          </div>

        </template>
        <div v-if="searchData.items && searchData.items.length === 0" style="text-align:center;margin-top:30px;">暂无数据</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { searchUser, addMediumUser } from '@/api/medium';
import { numFormat } from '@/filters/number';
import add_user_btn from '@/assets/medium/add_user_btn.png';
import ResourceInfo from '@/components/ResourceInfo';
import Title from '@/components/Title';
import platformIcon from '@/components/Common/platformIcon';
export default {
  name: 'AddMedium',
  filters: { numFormat },
  components: { ResourceInfo, Title, platformIcon },
  props: {
    orderNum: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      add_user_btn,
      activeNames: '',
      searchKeyword: '',
      searchData: {},
      searchLoading: false,
      perPage: 5,
      page: 1,
      operatorLoading: false,
      show: false
    };
  },
  methods: {
    tapOpenDialog() {
      this.dialogVisible = !this.dialogVisible;
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    },
    async getData(reset = false) {
      let searchKeyword = this.searchKeyword;
      if (searchKeyword !== '') {
        searchKeyword = searchKeyword.trim();
        if (reset) this.page = 1;
        try {
          const params = {
            page: this.page,
            perPage: this.perPage,
            searchKey: searchKeyword,
            orderNum: this.orderNum
          };
          this.searchLoading = true;
          const result = await searchUser(params);
          this.searchLoading = false;
          if (result.code === 200 && result.data) {
            this.searchData = result.data;
          } else {
            this.$message({ type: 'error', message: result.message });
          }
        } catch (error) {
          this.searchLoading = false;
          console.log(error);
        }
      }
    },
    async selectUser(item) {
      if (this.operatorLoading) return;
      const params = {
        id: item.id,
        orderNum: this.orderNum
      };
      try {
        this.operatorLoading = true;
        const result = await addMediumUser(params);
        this.activeNames = '';
        this.operatorLoading = false;
        if (result.code === 200) {
          item.select = true;
          this.show = false;
          this.$emit('getOrder');
          this.searchKeyword = '';
          this.searchData = {};
          this.$message({
            type: 'success',
            message: '添加成功'
          });
          this.tapOpenDialog();
        }
      } catch (error) {
        this.operatorLoading = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.link-name {
  color: #406eff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  img {
    width: 12px;
    position: relative;
    top: 1px;
    margin-left: 3px;
  }
}
.add-medium-container {
  background-color: #fff;
  width: 100%;
  padding: 0 21px;
  padding-top: 20px;
  padding-bottom: 30px;
  .add-btn {
    width: 100%;
    .btn {
      width:160px;
      height:40px;
      background:rgba(64,110,255,1);
      border-radius:6px;
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(255,255,255,1);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content:center;
      cursor: pointer;
      img {
        width: 16px;
        height: 16px;
        margin-left: 10px;
      }
    }
  }
  .search-box {
    display: flex;
    justify-content: center;
    & ::v-deep {
      .el-input {
        // width: 325px;
        height: 36px;
        display: flex;
        align-items: center;
        .el-input__suffix {
          right: 0 !important;
        }
      }
      .el-input__inner {
        background-color: #fff;
        height: 100%;
        border-radius: 4px;
        border: 1px solid #dddddd;
      }
    }
  }
  .search-result {
    .result-item {
      display: flex;
      align-items: center;
      margin: 23px 0;
      .result-tag-container {
        width: 55px;
        margin-right: 10px;
      }
      .result-tag {
        height: 21px;
        padding: 0 8px;
        display: inline-block;
        background-color: #e9f0f5;
        border-radius: 10.5px;
        font-size: 12px;
        color: #406EFF;
        line-height: 21px;
        font-weight: 600;
        text-align: center;
      }
      .result-info {
        display: flex;
        text-align: left;
        flex: 1;
        .avatar {
          position: relative;
          top: 2px;
          width: 45px;
          height: 45px;
          overflow: hidden;
          border-radius: 100%;
          border: 1px solid #eee;
          font-size: 13px;
          color: #fff;
          text-align: center;
          line-height: 45px;
          background:linear-gradient(167deg,rgba(116,167,255,1) 0%,rgba(64,110,255,1) 100%);
          img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
            object-fit: cover;
          }
        }
        .info {
          margin-left: 10px;
          width: 205px;
          flex:1;
          .name-box {
            display: flex;
            .name {
              flex: 1;
              color: #333;
              font-size: 16px;
            }
          }
          .num {
            color: #999999;
            font-size: 14px;
            line-height: 1.5;
          }
        }
      }
      .result-btn {
        background-color: #fff;
        .btn {
          display: inline-block;
          height: 32px;
          text-align: center;
          background-color: #EFF3FB;
          border-radius: 4px;
          color: #406EFF;
          font-weight: 600;
          font-size: 13px;
          line-height: 32px;
          border-radius: 16px;
          width: 64px;
          cursor: pointer;
          &.select {
            opacity: 0.5;
          }
        }
      }
    }
  }
  & ::v-deep {
    .el-collapse {
      border-top: none;
      border-bottom: none;
      .el-collapse-item__arrow{
        display: none;
      }
      .el-collapse-item__wrap {
        border-bottom: none;
      }
      .el-collapse-item__header  {
        border-bottom: none;
      }
    }
  }
}
.search-btn {
  height: 36px;
  background-color: #406EFF;
  padding: 0 20px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  line-height: 36px;
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
</style>
<style lang="scss">
.add-medium-container {
  .el-dialog {
    border-radius: 12px;
  }
  .el-dialog__body{
    padding: 0 20px 30px 20px;
  }
}

</style>
